<template>

    <div class="routine_item" @click="to_routine_detail">
        <div class="left_item">
            <el-image style="width: 100%;height: 100%;" :src="base_url + item.cover_img"></el-image>
        </div>
        <div class="right_item">
            <div class="title">
                <span style="font-weight: bold;font-size: 1.5vw;text-align: center;">
                    {{ item.title }}</span>
            </div>
            <div class="base_info">
                <div class="time">
                    <img :src="base_url + '/assets/svg/home/essay/timer.svg'" style="width: 5%;" alt="">
                    <span>{{ item.publish_time }}</span>
                </div>
                <div class="e_c_l">
                    <div class="eye">
                        <img :src="base_url + '/assets/svg/home/routine/eye.svg'" style="width: 15%;" alt="">
                        <span>{{ item.browse }}浏览</span>
                    </div>
                    <div class="comment">
                        <img :src="base_url + '/assets/svg/home/routine/comment.svg'" style="width: 15%;" alt="">
                        <span>{{ item.review }}评论</span>
                    </div>
                    <div class="love">
                        <img :src="base_url + '/assets/svg/home/routine/likes.svg'" style="width: 15%;" alt="">
                        <span>{{ item.likes.length }}点赞</span>
                    </div>
                </div>
            </div>
            <div class="content">
                <span>
                    {{ item.textual }}
                </span>

            </div>
            <div class="tags">

                <R_Tag v-for="it in item.tags" :key="it.id" :tip="it.title"></R_Tag>

            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>

import R_Tag from "./R_Tag.vue"
import { useRouter } from "vue-router"
import { add_views } from "@/apis/web/WebApi"
const base_url = import.meta.env.VITE_APP_URL
const router = useRouter()
const props = defineProps(['item'])
const to_routine_detail = async () => {
    router.push(`/routine_detail/${props.item._id}`)
    await add_views(props.item._id)
}
</script>
<style scoped lang="scss">
.routine_item:hover {
    transform: translateY(-1vw);
}

.routine_item {
    transition: all 1s;
    display: flex;
    width: 70%;
    background-color: aliceblue;
    height: 15vw;
    box-shadow: 0 0 10px #000;
    margin-bottom: 2vw;
    overflow: hidden;



    .right_item {
        width: 50%;
        padding: 1vw;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        .title {
            width: 100%;
            display: flex;
            justify-content: center;

            span {
                width: 80%;
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 1;
                -webkit-box-orient: vertical;
            }
        }

        .base_info {
            width: 100%;
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: space-around;
            margin-top: 0.5vw;

            .time {

                width: 100%;
                display: flex;
                align-items: center;
                justify-content: center;

                span {
                    margin-left: 1vw;
                    font-size: 1vw;

                }
            }

            .e_c_l {
                margin-top: 0.5vw;
                width: 100%;
                display: flex;
                justify-content: center;

                .comment,
                .eye,
                .love {

                    width: 33%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    span {
                        font-size: 1vw;
                    }
                }
            }

        }

        .content {
            width: 100%;
            margin-top: 1vw;
            display: flex;
            font-size: 1vw;

            span {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 4;
                -webkit-box-orient: vertical;
            }
        }

        .tags {
            margin-top: 1vw;
            display: flex;
            flex-wrap: wrap;
        }
    }

    .left_item {
        width: 50%;
        height: 100%;
        overflow: hidden;

        .el-image {
            transition: all 1s;
        }

        .el-image:hover {
            transform: scale(1.1);
        }
    }

}
</style>